import React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { IImage } from './interface';
// import ScreenshotsContext from './ScreenshotsContext';
import { ScreenshotsContext } from './Screenshot';
interface IProps {
    onMagnify: any;
    onChange: any;
}
type Point = {
    x: number;
    y: number;
};
export default (props: IProps) => {
    const context = useContext(ScreenshotsContext);
    const { state, dispatch } = context;
    const { onMagnify, onChange } = props;

    const canvasRef = useRef<HTMLCanvasElement>(null);
    const [is, setIs] = useState(false);
    const [point, setPoint] = useState<Point | null>(null);

    const update = useCallback(
        (event: any) => {
            if (!point) return;
            const { x, y } = point;
            onChange({ x1: x, y1: y, x2: event.clientX, y2: event.clientY });
        },
        [onChange, point],
    );

    const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        if (state.viewer || event.button !== 0) return;
        dispatch({
            type: 'reset',
        });
        setIs(true);
        setPoint({ x: event.clientX, y: event.clientY });
        dispatch({
            type: 'resizing',
        });
        update(event)
    };

    const onMouseMove = useCallback(
        (event: MouseEvent) => {
            if (!state.viewer || (state.viewer && state.viewer.resizing)) {
                onMagnify({ x: event.clientX, y: event.clientY });
            }
            if (!is) return;
            update(event);
        },
        [is, onMagnify, update, state],
    );
    const onMouseUp = useCallback((e: MouseEvent) => {
        if (is) {
            update(e)
            setIs(false)
            dispatch({
                type: 'setViewer',
                data: {
                    ...state.viewer,
                    resizing: false
                }
            })
        }
    }, [is, update, dispatch, state]);

    

    useLayoutEffect(() => {
        window.addEventListener('mousemove', onMouseMove);
        window.addEventListener('mouseup', onMouseUp);
        return () => {
            window.removeEventListener('mousemove', onMouseMove);
            window.removeEventListener('mouseup', onMouseUp);
        };
    }, [onMouseMove, onMouseUp]);


    const [lastImage, setLastIamge] = useState<IImage | null>(null)
    const draw = useCallback(() => {
        const { image, width, height } = state;
        if (!image?.el) return;
        if (image?.el.src === lastImage?.el?.src) return
        console.log(image)
        setLastIamge(image)
        const ctx = canvasRef.current?.getContext('2d');
        // ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
        ctx?.clearRect(0, 0, width, height);
        ctx?.drawImage(image.el, 0, 0, image.width, image.height);
    }, [state]);
    useLayoutEffect(() => {
        draw();
    }, [draw]);

    return (
        <div className="screenshots-canvas" onMouseDown={onMouseDown}>
            <canvas ref={canvasRef} width={state.width} height={state.height} />
            <div className="screenshots-canvas-mask" />
        </div>
    );
};
